<template>
    <VCharts
        v-if="renderChart"
        :option="options"
        :group="group"
        :autoresize="autoResize"
        :style="{ width, height }"
    />
</template>

<script lang="ts" setup>
    import { ref, nextTick } from 'vue';
    import VCharts from 'vue-echarts';
    // import { useAppStore } from '@/store';

    const props = defineProps({
        options: {
            type: Object,
            default() {
                return {};
            },
        },
        group: {
            type: String,
        },
        autoResize: {
            type: Boolean,
            default: true,
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '100%',
        },
    });
    // const appStore = useAppStore();
    // const theme = computed(() => {
    //   if (appStore.theme === 'dark') return 'dark';
    //   return '';
    // });
    const renderChart = ref(false);
    // wait container expand
    nextTick(() => {
        console.log(props.group);
        renderChart.value = true;
    });
</script>

<style scoped lang="less"></style>
